<template>
  <div class="water-report">
    <div class="top-nav"></div>
    <div class="main-content">
      <div class="title-box">用水报表</div>
      <section class="top-main">
        <div class="water-conservation">
          <div class="title-little-box">用水总览</div>
        </div>
        <div class="equipment-operation">
          <div class="title-little-box">用水月报表</div>
        </div>
      </section>

      <section class="center-main">
        <div class="water-analysis panel1">
          <div class="inner1">
            <div class="top-echart">
              <div class="water-ratio">
                <div class="year-ratio">
                  <p class="ratio-value">
                    {{ showWaterUseData && showWaterUseData.yoy }}%
                  </p>
                  <p class="desc-text">环比增长</p>
                </div>
                <div class="now-year">
                  <p class="desc-text">
                    本年用水量（{{
                      showWaterUseData && showWaterUseData.year
                    }}年）
                  </p>
                  <p class="now-color">
                    {{ showWaterUseData && showWaterUseData.tyear }} m³
                  </p>
                </div>
                <div class="last-year">
                  <p class="desc-text">
                    环比用水量（{{
                      showWaterUseData && showWaterUseData.lastYear
                    }}年）
                  </p>
                  <p class="last-color">
                    {{ showWaterUseData && showWaterUseData.lyear }} m³
                  </p>
                </div>
              </div>
            </div>
            <div class="bottom-echart">
              <div class="charts-content">
                <Vechart class="option" :options="options1Data"></Vechart>
              </div>
            </div>
          </div>
        </div>
        <div class="report-table panel1">
          <div class="inner1">
            <div class="table-option">
              <div
                class="table-data-box"
                :style="{ height: isCenter ? '90%' : '100%' }"
              >
                <el-table
                  class="main2-table"
                  :row-class-name="rowClass"
                  :data="showTableList"
                  :cell-style="{
                    height: '50px',
                    color: '#84BFDD',
                    textAlign: 'center',
                  }"
                  :header-cell-style="{
                    background: '#102C44',
                    color: '#fff',
                    textAlign: 'center',
                    fontSize: '0.08rem',
                    heihgt: '50px',
                  }"
                  height="100%"
                >
                  <template slot="empty">
                    <p class="empty_text"></p>
                  </template>
                  <el-table-column
                    :prop="item.tag"
                    :label="item.name"
                    v-for="item in showTableTitles"
                    :key="item.tag"
                    :width="showTableTitles.length > 10 ? '124px' : 'auto'"
                  >
                    <template slot="header">
                      <div style="cursor: pointer">
                        {{ item.name }}
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div v-if="isCenter" class="option-check">
                <span class="time_text">月份选择</span>

                <el-select
                  v-model="value"
                  @change="dateChange"
                  placeholder="请选择"
                  class="select-title-option"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section class="bottom-main">
        <div class="time-line">
          <el-button
            v-for="(item, index) in yearList"
            :key="index"
            class="date-item"
            :class="{ 'current-time': year == item }"
            @click="yearQuery(item)"
          >
            {{ item }}年
          </el-button>
        </div>
        <div class="confirm_export" @click="confirmExport">导出</div>
      </section>
    </div>
  </div>
</template>
<script>
function getCurrentMonth() {
  var date = new Date();
  var yesterday_milliseconds = date.getTime() - 1000 * 60 * 60 * 24;
  var yesterday = new Date();
  yesterday.setTime(yesterday_milliseconds);

  var strYear = yesterday.getFullYear();
  var strDay = yesterday.getDate();
  var strMonth = yesterday.getMonth() + 1;
  if (strMonth < 10) {
    strMonth = "0" + strMonth;
    strDay = "0" + strDay;
  }
  return strMonth;
}
import Vechart from "../../components/charts/Vcharts";
import options1 from "./echartsjson/options1.json";
import { yearArray } from "../../utils/index.js";
import { mapState } from "vuex";
export default {
  name: "Elecanalysis",
  props: [
    "waterUseData",
    "tableList",
    "tableTitles",
    "roseData",
    "optionsData",
  ],
  components: {
    Vechart,
  },
  data() {
    return {
      options: [
        {
          value: "01",
          label: "1月",
        },
        {
          value: "02",
          label: "2月",
        },
        {
          value: "03",
          label: "3月",
        },
        {
          value: "04",
          label: "4月",
        },
        {
          value: "05",
          label: "5月",
        },
        {
          value: "06",
          label: "6月",
        },
        {
          value: "07",
          label: "7月",
        },
        {
          value: "08",
          label: "8月",
        },
        {
          value: "09",
          label: "9月",
        },
        {
          value: "10",
          label: "10月",
        },
        {
          value: "11",
          label: "11月",
        },
        {
          value: "12",
          label: "12月",
        },
      ],
      value: getCurrentMonth(),
      options1: options1,
      colors: [
        "#EE6B86",
        "#E99114",
        "#E9EA8B",
        "#29DAD1",
        "#1CA7E9",
        "#545CBE",
      ],
      yearList: yearArray(),
      year: new Date().getFullYear() + "",
    };
  },

  methods: {
    rowClass({ row, column, rowIndex, columnIndex }) {
      if (row.time == "总计") {
        return "fixed-row";
      }
    },
    dateChange() {
      this.$emit("Selectmonth", this.value);
    },
    yearQuery(year) {
      this.$emit("Checkyear", year);
      this.year = year;
    },
    confirmExport() {
      this.$emit("ConfirmQuery");
    },
  },
  computed: {
    ...mapState(["isCenter"]),
    showWaterUseData() {
      if (Object.keys(this.waterUseData).length > 0) {
        return this.waterUseData;
      }
    },
    showTableList() {
      if (this.tableList.length) {
        return this.tableList;
      }
    },
    showTableTitles() {
      if (this.tableTitles.length) {
        return this.tableTitles;
      }
    },
    options1Data() {
      // return this.options1;
      let datas = this.optionsData;
      if (Object.keys(datas).length && datas.enames.length) {
        let { enames, values } = datas;
        let color = this.colors.slice(0, enames.length + 1);
        let series = [];
        for (let i = 0; i < enames.length; i++) {
          series.push({
            name: enames[i],
            type: "bar",
            stack: "月耗电",
            emphasis: {
              focus: "series",
            },
            // barWidth: "30%",
            data: values[i],
          });
        }
        return {
          ...this.options1,
          color,
          legend: {
            ...this.options1.legend,
            data: enames,
          },
          xAxis: [
            {
              ...this.options1.xAxis[0],
              axisLabel: {
                ...this.options1.xAxis[0].axisLabel,
                // formatter: function(params, index) {
                //   return params.slice(5, 10);
                // }
              },
              data: datas.time || "暂无数据！",
            },
          ],
          series,
        };
      } else {
        return this.options1;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.water-report {
  width: 100%;
  height: 100%;
  .top-nav {
    width: 10rem;
    height: 0.41rem;
  }
  .main-content {
    width: 10rem;
    height: calc(100% - 0.5rem);
    position: relative;
    .title-box {
      position: absolute;
      font-weight: bold;
      top: 10px;
      left: 0;
      font-size: 22px;
      color: #ffffff;
      text-align: center;
      width: 220px;
      height: 44px;
      line-height: 44px;
      background: url("../../assets/img/ti.png") no-repeat center;
      background-size: cover;
    }
    .top-main {
      width: 100%;
      height: 10%;
      display: flex;
      .water-conservation {
        width: 50%;
        height: 100%;
      }
      .equipment-operation {
        width: 50%;
        height: 100%;
      }
    }
    .center-main {
      width: 100%;
      height: 80%;
      display: flex;
      justify-content: space-around;
      //   background-color: #fff;
      .water-analysis {
        width: 55%;
        height: 100%;
        // background-color: #84bfdd;
        font-size: 20px;
        color: #fff;
        .top-echart {
          width: 100%;
          // height: 30%;
          .water-ratio {
            width: 828px;
            height: 183.6px;
            margin: 0 auto;
            background: url("../../assets/img/water.png") no-repeat top center;
            background-size: cover;
            padding: 30px 0 16px 0px;
            // background-color: #84bfdd;
            display: flex;
            align-items: center;
            text-align: center;
            .year-ratio {
              width: 22%;
              height: 80%;
              .ratio-value {
                height: 50%;
                // line-height: 2rem;
                font-size: 40px;
                font-weight: 700;
                color: #fff;
              }
              .desc-text {
                height: 50%;
                // line-height: 0.6rem;
                color: #97daf8;
                font-size: 22px;
              }
            }
            .now-year {
              width: 42%;
              height: 80%;
              .now-color {
                height: 50%;

                font-size: 40px;
                font-weight: 700;
                color: #dbca0d;
              }
              .desc-text {
                height: 50%;

                color: #97daf8;
                font-size: 22px;
              }
            }
            .last-year {
              width: 30%;
              height: 80%;
              .last-color {
                height: 50%;

                font-size: 40px;
                font-weight: 700;
                color: #09bdd7;
              }
              .desc-text {
                height: 50%;

                color: #97daf8;
                font-size: 22px;
              }
            }
          }
        }
        .bottom-echart {
          width: 100%;
          height: 70%;
          .charts-content {
            height: 100%;
            width: 100%;
          }
        }
      }
      .report-table {
        width: 43%;
        height: 100%;
        color: #fff;
        font-size: 20px;
        .table-option {
          background-color: #fff;
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          .table-data-box {
            width: 100%;
            .main2-table {
              background-color: #050f23 !important;
            }
            /deep/.el-table tr {
              background-color: #050f23 !important;
            }
            /deep/.el-table__row.statistics-warning-row {
              background: #071635 !important;
            }
            /deep/.el-table__row.normal-now {
              background: #050f23 !important;
            }
          }
          .option-check {
            width: 100%;
            height: 10%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #050f23;
            user-select: none;
            .time_text {
              width: 120px;
              height: 40px;
              text-align: center;
              margin: 0 5px;
              font-size: 18px;
              color: #ffff;
              line-height: 40px;
            }

            .select-title-option {
              width: 74px;
              height: 40px;
              background: #091c37;
              border: none;
            }
          }
        }
      }
    }
    .bottom-main {
      width: 100%;
      height: 10%;
      position: relative;
      .confirm_export {
        position: absolute;
        cursor: pointer;
        top: 50%;
        right: 24%;
        width: 120px;
        height: 44px;
        transform: translateY(-50%);
        background: #091c37;
        border-radius: 6px;
        text-align: center;
        line-height: 44px;
        font-size: 16px;
        font-weight: bold;
        color: #28c2ff;
        border: 1px solid #0a73b1;
      }
      .time-line {
        width: 50%;
        margin: 0 auto;
        cursor: pointer;
        height: 100%;
        background: url("../../assets/img/timeline.png") no-repeat center center;
        background-size: contain;
        display: flex;
        justify-content: center;
        align-items: center;
        .date-item {
          // width: 1rem;
          height: 44px;
          margin: 0 20px;
          text-align: center;
          background: #091c37;
          border: 1px solid #0a73b1;
          font-size: 16px;
          color: #28c2ff;
          border-radius: 6px;
          // line-height: 44px;
        }
        .current-time {
          background: #2b70b2;
          color: #fff;
          border: 2px solid #2b70b2;
        }
      }
    }
    .title-little-box {
      width: 680px;
      font-size: 28px;
    }
  }
}
</style>
